import React, { Component } from 'react';
import MyNavBar from '../../../components/MyNavBar'
import { List, InputItem, Picker, ImagePicker, Flex, Toast, TextareaItem } from 'antd-mobile'
import styles from './index.module.scss'
import HouseMatch from 'components/HouseMatch'
import { Link } from 'react-router-dom'
import store from '../../../store'

const Item = List.Item
const Brief = Item.Brief
// 房屋类型
const roomTypeData = [
    { label: "一室", value: "ROOM|d4a692e4-a177-37fd" },
    { label: "二室", value: "ROOM|d1a00384-5801-d5cd" },
    { label: "三室", value: "ROOM|20903ae0-c7bc-f2e2" },
    { label: "四室", value: "ROOM|ce2a5daa-811d-2f49" },
    { label: "四室+", value: "ROOM|2731c38c-5b19-ff7f" },
];
// 所在楼层
const floorData = [
    { label: "高楼层", value: "ROOM|d4a692e4-a177-37fd" },
    { label: "中楼层", value: "ROOM|d1a00384-5801-d5cd" },
    { label: "低楼层", value: "ROOM|20903ae0-c7bc-f2e2" }
];
// 朝向
const orientationData = [
    { label: "东", value: "ORIEN|141b98bf-1ad0-11e3" },
    { label: "西", value: "ORIEN|103fb3aa-e8b4-de0e" },
    { label: "南", value: "ORIEN|61e99445-e95e-7f37" },
    { label: "北", value: "ORIEN|caa6f80b-b764-c2df" },
    { label: "东南", value: "ORIEN|dfb1b36b-e0d1-0977" },
    { label: "东北", value: "ORIEN|67ac2205-7e0f-c057" },
    { label: "西南", value: "ORIEN|2354e89e-3918-9cef" },
    { label: "西北", value: "ORIEN|80795f1a-e32f-feb9" },
];
class AddRent extends Component {
    constructor() {
        super()
        const storeState = store.getState()
        this.state = {
            price: "", // 租金
            size: "", // 房屋面积
            roomType: "", // 房屋类型
            floor: "", // 楼层
            description: "", //房屋描述
            oriented: "", //朝向
            title: "", //房屋标题
            // houseHead: [] //房屋头像
            files: [], //房屋头像

            supporting: "", //房屋配置
            community: storeState && storeState.community, //小区的id
            communityName: storeState && storeState.communityName //小区的名称
        }
    }


    onChange = (files, type, index) => {
        console.log(files, type, index);
        this.setState({
            files,
        });
    };
    // 接收子组件传递过来的值
    onHouseMatchChange = (val) => {
        this.setState({
            supporting: val,
        });
    };
    // 取消
    cancel = () => {
        console.log("quxiao")
    }
    // 提交
    submit = async () => {
        const {
            price,
            size,
            roomType,
            floor,
            oriented,
            title,
            files,
            supporting,
            community,
            description
        } = this.state
        if (!community) {
            Toast.info("必须选择小区", 1)
            return
        }
        if (price.trim().length === 0) {
            Toast.info("必须填写租金", 1)
            return
        }
        if (size.trim().length === 0) {
            Toast.info("必须填写建筑面积", 1)
            return
        }
        if (roomType.trim().length === 0) {
            Toast.info("必须选择户型", 1)
            return
        }
        if (floor.trim().length === 0) {
            Toast.info("必须选择所在楼层", 1)
            return
        }
        if (oriented.trim().length === 0) {
            Toast.info("必须选择朝向", 1)
            return
        }
        if (title.trim().length === 0) {
            Toast.info("必须填写房屋标题", 1)
            return
        }
        if (files.length === 0) {
            Toast.info("必须上传房屋图片", 1)
            return
        }
        if (supporting.trim().length === 0) {
            Toast.info("必须选择房屋房屋配套信息", 1)
            return
        }
        if (description.trim().length === 0) {
            Toast.info("必须填写房屋描述", 1)
            return
        }
        // 房屋图片上传
        const formData = new formData()
        files.forEach(item => {
            formData.append(item.file)
        })
        let res1 = await this.axios.post("/houses/image", formData, {
            headers: {
                "Content-Type": "multipart/form-data"
            }
        }
        )
        if (res1.data.status == 200) {
            const data = {
                community,
                price,
                size,
                title,
                roomType,
                floor,
                oriented,
                supporting,
                description,
                oriented,
                houseImg: res1.data.body.join('|')
            }
            // 发布房源
            const res2 = this.axios.post("/user/houses", data)
            if (res2.data.status == 200) {
                // 发布成功
                Toast.info("发布成功",1.5)
                // 跳到我的出租列表中去
                this.props.history.replace("/rent")
            }
        }
    }
    render() {
        const { price, size, roomType, oriented, floor, title, files, communityName, description } = this.state
        return (
            <div className={styles.root}>
                <MyNavBar title="发布房源" />
                <List renderHeader={() => '房源信息'} >
                    <Link to="/rent/search">
                        <Item
                            arrow="horizontal"
                            extra={communityName ? communityName : "请输入小区名称"}
                            multipleLine onClick={() => { }}>
                            小区名称
                        </Item>
                    </Link>
                    <InputItem
                        type="price"
                        placeholder="请输入佣金/月"
                        onChange={val => this.setState({ price: val })}
                        value={price}
                        extra="¥/月"
                    >租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</InputItem>
                    <InputItem
                        type="size"
                        placeholder="请输入建筑面积"
                        onChange={val => this.setState({ size: val })}
                        value={size}
                        extra="㎡"
                    >建筑面积</InputItem>
                    <Picker
                        data={roomTypeData}
                        value={roomType}
                        cols={1}
                        onChange={val => this.setState({ roomType: val })}
                    >
                        <List.Item arrow="horizontal">户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</List.Item>
                    </Picker>
                    <Picker
                        data={floorData}
                        value={floor}
                        cols={1}
                        onChange={val => this.setState({ floor: val })}
                    >
                        <List.Item arrow="horizontal">所在楼层</List.Item>
                    </Picker>
                    <Picker
                        data={orientationData}
                        value={oriented}
                        cols={1}
                        onChange={val => this.setState({ oriented: val })}
                    >
                        <List.Item arrow="horizontal">朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向</List.Item>
                    </Picker>
                </List>
                <List renderHeader={() => '房屋标题'}>
                    <InputItem
                        type="area"
                        placeholder="请输入标题(例如 : 整租小区名 2室 5000元)"
                        onChange={val => this.setState({ title: val })}
                        value={title}
                    ></InputItem>
                </List>
                <List renderHeader={() => '房屋头像'}>
                    <ImagePicker
                        files={files}
                        onChange={this.onChange}
                        onImageClick={(index, fs) => console.log(index, fs)}
                        selectable={files.length < 5}
                        accept="image/gif,image/jpeg,image/jpg,image/png"
                    />
                </List>
                <List renderHeader={() => '房屋配套'}>
                    <HouseMatch readonly={false} onHouseMatchChange={this.onHouseMatchChange} />
                </List>
                <List renderHeader={() => "房屋描述"}>
                    <TextareaItem
                        value={description}
                        onChange={(val) => this.setState({ description: val })}
                        placeholder="请输入房屋描述"
                        rows={5}
                    ></TextareaItem>
                </List>
                <Flex className={styles.bottom}>
                    <Flex.Item className={styles.cancel} onClick={this.cancel}>
                        取消
                    </Flex.Item>
                    <Flex.Item className={styles.confirm} onClick={this.submit}>
                        提交
                    </Flex.Item>
                </Flex>
            </div>
        );
    }
}

export default AddRent;